<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/modules/lib/ligerUI1.1.0/skins/Aqua/css/ligerui-all.css">
    
	<script type="text/javascript" src="<%=basePath %>/modules/lib/jquery/jquery-1.3.2.min.js"></script>
	<SCRIPT type="text/javascript" src="<%=basePath %>/modules/lib/ligerUI1.1.0/js/ligerui.min.js"></SCRIPT>
	
	<style type="text/css">
         body{ font-size:12px;}
        .l-table {width:100%;margin: 2 0 2 0;}
        .l-table-td-lable{ padding-right:8px;margin-right:6px;text-align:right;width:15%;}
        .l-table-td-content{padding-left:6px;width:25%;}
        .l-table-td-button{}
        .l-button-submit,.l-button-reset{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
        .l-verify-tip{ left:230px; top:120px;}
    </style>
	
  </head>
    <script type="text/javascript">
        $(function ()
        {
            var jsonObj = {};
            jsonObj.Rows = [
                { id: 3, name: "林三", sex: "男", birthday: "1989/01/12" },
                { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12" },
                { id: 33, name: "啊三", sex: "男", birthday: "1981/12/12" },
                { id: 34, name: "表三", sex: "男", birthday: "1983/01/12" },
                { id: 43, name: "陈丽", sex: "女", birthday: "1989/01/12" },
                { id: 10, name: "成三", sex: "男", birthday: "1989/11/13" },
                { id: 34, name: "都三", sex: "女", birthday: "1989/04/2" },
                { id: 324, name: "鄂三", sex: "男", birthday: "1999/05/5" },
                { id: 344, name: "林三", sex: "男", birthday: "1969/02/2" },
                { id: 1, name: "王开", sex: "男", birthday: "1989/01/2" },
                 { id: 34, name: "都三", sex: "女", birthday: "1989/04/2" },
                { id: 324, name: "鄂三", sex: "男", birthday: "1999/05/5" },
                { id: 344, name: "林三", sex: "男", birthday: "1969/02/21" },
                { id: 1, name: "王开", sex: "男", birthday: "1989/01/2" }
            ];
            $("#maingrid").ligerGrid({
                columns: [
                { display: '排序', name: 'id', width: 100, type: 'int', editor: { type: 'int'} },
                { display: '名字', name: 'name', width: 100 },
                { display: '性别', name: 'sex', width: 100, isSort: false,
                    editor: { type: 'select', data: [[0, '男'], [1, '女']] }
                },
                { display: '生日', name: 'birthday', type: 'date', width: 100, editor: { type: 'date'} }
                ], width: 600, height: '100%', width: '100%',
                data: jsonObj,
                pageSizeOptions: [5, 10]
            }); 
        });
    </script>  
  <body>
  <form name="queryForm"  method="post" id="queryForm">
	<div>
		<table cellpadding="0" cellspacing="0" class="l-table" width="95%" border="1">
			<tr>
				<td  class="l-table-td-lable">name:</td><td align="left" class="l-table-td-content"><input name="exampleName" id="exampleName" type="text" ltype="text"/></td>
				<td align="right" class="l-table-td-lable">code:</td><td align="left" class="l-table-td-content">
					<select name="selCode" id="selCode" ltype="select">
						<option value="1">China</option>
						<option value="2">USA</option>
					</select>
				</td>
				<td align="center" >
				<div>
					<input type="submit" value="提交" id="Button1" class="l-button l-button-submit" /> 
					<input type="reset" value="重置" class="l-button l-button-reset"/>
				</div>
			</td>
			</tr>
			
		</table>
	</div>
  </form>
	<div id="maingrid"></div>
  </body>
</html>
